<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Gappa is a bootstrap minimal & clean admin template">
    <meta name="keywords"
          content="chat, chat platform, discussion, video call, voice call, communication, conversation, messange, messanger, talk">
    <meta name="author" content="Themesbox">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>歡迎來到【Private Chat線上聊天系統】</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="/home/images/favicon.ico">
    <!-- Start css -->
    <link href="/home/css/jquery.mCustomScrollbar.min.css" rel="stylesheet">
    <link href="/home/css/jquery.emoji.css" rel="stylesheet">
    <!-- Slick css -->
    <link href="/home/plugins/slick/slick.css" rel="stylesheet">
    <link href="/home/plugins/slick/slick-theme.css" rel="stylesheet">
    <link href="/home/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/home/css/icons.css" rel="stylesheet" type="text/css">
    <link href="/home/css/flag-icon.min.css" rel="stylesheet" type="text/css">
    <link href="/home/css/style.css" rel="stylesheet" type="text/css">
    <!-- End css -->
</head>
<body class="light-layout">
<!-- Start add user Modal -->
<div class="modal create-group-modal fade" id="addUser" role="dialog" aria-labelledby="addUserTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addUserTitle">添加好友</h5>
            </div>
            <div class="modal-body">
                <form>
                    <div class="add-users-search">
                        <div class="input-group">
                            <input type="search" class="form-control" id="add-users-search-content"
                                   placeholder="根據用戶名蒐索用戶" aria-label="Search"
                                   aria-describedby="add-users-search-btn">
                            <div class="input-group-append">
                                <button class="btn" type="button" id="add-users-search-btn"><i
                                            class="feather icon-search"></i></button>
                            </div>
                        </div>
                    </div>
                    <div class="add-users-list">
                        <ul class="list-unstyled" id="show-search-user-list">

                        </ul>
                    </div>
                    <div class="mt-3 text-center">
                        <button type="button" class="btn btn-primary" id="add-users-submit-btn"><i
                                    class="feather icon-plus mr-2"></i>向勾選用戶發送好友請求
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- End add user Modal -->
<!-- Start Chat Layout -->
<div class="chat-layout">
    <!-- Start Chat Leftbar -->
    <div class="chat-leftbar">
        <div class="tab-content" id="pills-tab-justifiedContent">
            <!-- Start Chat List bar -->
            <div class="tab-pane fade show active" id="pills-chat-justified" role="tabpanel"
                 aria-labelledby="pills-chat-tab-justified">
                <div class="chat-listbar">
                    <div class="chat-left-headbar">
                        <div class="row align-items-center">
                            <div class="col-12">
                                <ul class="list-unstyled mb-0">
                                    <li class="media">
                                        <img class="align-self-center mr-2" src="/home/images/logo.svg"
                                             alt="Generic placeholder image">
                                        <div class="media-body">
                                            <h5 class="mb-0 mt-2">Private Chat線上聊天系統</h5>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="chat-left-search">
                        <form>
                            <div class="input-group">
                                <input type="search" onKeyUp="searchInfo(this.value)" class="form-control"
                                       placeholder="蒐索其實很簡單" aria-label="Search"
                                       aria-describedby="chat-left-search-btn">
                                <div class="input-group-append">
                                    <button class="btn" type="button" id="chat-left-search-btn"><i
                                                class="feather icon-search"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="chat-left-body">
                        <div class="nav flex-column nav-pills chat-userlist" id="chat-list-tab" role="tablist"
                             aria-orientation="vertical">

                        </div>
                        <div class="nav flex-column nav-pills chat-userlist" id="search-chat-list-tab" role="tablist"
                             aria-orientation="vertical" style="display:none;">

                        </div>
                    </div>
                </div>
            </div>
            <!-- End Chat Listbar -->
            <!-- Start Chat Add bar -->
            <div class="tab-pane fade" id="pills-addchat-justified" role="tabpanel"
                 aria-labelledby="pills-addchat-tab-justified">
                <div class="chat-addbar">
                    <div class="chat-left-headbar">
                        <div class="row align-items-center">
                            <div class="col-9">
                                <ul class="list-unstyled mb-0">
                                    <li class="media">
                                        <img class="align-self-center mr-2" src="/home/images/logo.svg"
                                             alt="Generic placeholder image">
                                        <div class="media-body">
                                            <h5 class="mb-0 mt-2">通訊錄</h5>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-3">
                                <div class="dropdown">
                                    <a href="#" id="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i
                                                class="feather icon-plus"></i></a>
                                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="settingDropdown">
                                        <a class="dropdown-item font-14" href="#" data-toggle="modal" id="searchFriends"
                                           data-target="#addUser"><i class="feather icon-user-plus"></i> 添加好友</a>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="chat-left-body">
                        <div class="nav flex-column nav-pills chat-userlist" id="new-chat-tab" role="tablist"
                             aria-orientation="vertical">
                            <a id="new-friend-request-tab" ></a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Chat Addbar -->
            <!-- Start Chat Profilebar -->
            <div class="tab-pane fade" id="pills-profile-justified" role="tabpanel"
                 aria-labelledby="pills-profile-tab-justified">
                <div class="chat-profilebar">
                    <div class="chat-left-headbar">
                        <div class="row align-items-center">
                            <div class="col-12">
                                <ul class="list-unstyled mb-0">
                                    <li class="media">
                                        <img class="align-self-center mr-2" src="/home/images/logo.svg"
                                             alt="Generic placeholder image">
                                        <div class="media-body">
                                            <h5 class="mb-0 mt-2">個人中心</h5>
                                            <input type="hidden" id="current-online-user-id" value="${pc_account.id}">
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="chat-left-body">
                        <div class="profilebar">
                            <img class="profile-pic img-fluid" id="user-center-img"
                                 src="/photo/view?filename=${pc_account.headPic!"default.png"}"
                                 data-img="${pc_account.headPic!"default.png"}" alt="profile-pic">
                            <div class="profile-edit">
                                <i class="feather icon-camera upload-button"></i>
                                <input type="hidden" id="user-head-pic" value="${pc_account.headPic!"default.png"}">
                                <input class="profile-upload" type="file" id="user-photo-file" onchange="uploadFile()"
                                       accept="image/*"/>
                            </div>
                            <h5 id="show-user-name">${pc_account.username}</h5>
                            <p class="mb-0" id="show-user-info">${pc_account.info!"此人很懶，什麼介紹也沒寫！"}</p>
                        </div>
                        <div class="profile-detail">
                            <ul class="list-unstyled mb-0">
                                <li class="media">
                                    <i class="feather icon-edit align-self-center"></i>
                                    <div class="media-body">
                                        <p>個人簡介</p>
                                        <div class="input-group">
                                            <input type="text" class="form-control" maxlength="64" id="user-info"
                                                   value="${pc_account.info!""}" placeholder="請輸入個人簡介"
                                                   aria-label="${pc_account.info!""}"
                                                   aria-describedby="button-addon-group-location">
                                        </div>
                                    </div>
                                </li>
                                <li class="media">
                                    <i class="feather icon-message-square align-self-center"></i>
                                    <div class="media-body">
                                        <p>線上狀態</p>
                                        <div class="input-group">
                                            <a href="javascript:void(0)" id="online-status" data-toggle="dropdown"
                                               aria-haspopup="true" aria-expanded="false"
                                               data-key="${pc_account.chatStatus!"status-offline"}">
                                                <#if pc_account.chatStatus == "active"><span
                                                        style="color: #19a299; ">●</span> 線上
                                                <#elseif pc_account.chatStatus == "status-offline"><span
                                                        style="color: #dee2e6; ">●</span> 離線
                                                <#elseif pc_account.chatStatus == "status-away"><span
                                                        style="color: #eec028; ">●</span> 離開
                                                </#if>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-right"
                                                 aria-labelledby="online-status">
                                                <a class="dropdown-item font-14 status-change" data-key="active"
                                                   href="javascript:void(0)"><span style="color: #19a299; ">●</span> 線上</a>
                                                <a class="dropdown-item font-14 status-change" data-key="status-offline"
                                                   href="javascript:void(0)"><span style="color: #dee2e6; ">●</span> 離線</a>
                                                <a class="dropdown-item font-14 status-change" data-key="status-away"
                                                   href="javascript:void(0)"><span style="color: #eec028; ">●</span> 離開</a>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="media">
                                    <i class="feather icon-user align-self-center"></i>
                                    <div class="media-body">
                                        <p>性別</p>
                                        <div class="input-group">
                                            <span>
                                                <#if pc_account.sex == 1><span style="color: #19a299; ">♂</span> 男
                                                <#elseif pc_account.sex == 0><span style="color: #19a299; ">♀</span> 女
                                                <#else><span style="color: #dee2e6; ">？</span> 未知
                                                </#if>
                                            </span>
                                        </div>
                                    </div>
                                </li>
                                <li class="media">
                                    <i class="feather icon-user align-self-center"></i>
                                    <div class="media-body">
                                        <p>出生日期</p>
                                        <div class="input-group">
                                            <input type="date" class="form-control" id="user-birthday"
                                                   value="${pc_account.birthday!""}"
                                                   aria-label="${pc_account.birthday!""}"
                                                   aria-describedby="button-addon-group-emailid">
                                        </div>
                                    </div>
                                </li>
                                <li class="media">
                                    <i class="feather icon-mail align-self-center"></i>
                                    <div class="media-body">
                                        <p>郵箱</p>
                                        <div class="input-group">
                                            <input type="email" class="form-control" id="user-email"
                                                   value="${pc_account.email!""}" placeholder="請輸入郵箱"
                                                   aria-label="${pc_account.email!""}"
                                                   aria-describedby="button-addon-group-emailid">
                                        </div>
                                    </div>
                                </li>
                                <li class="media">
                                    <i class="feather icon-lock align-self-center"></i>
                                    <div class="media-body">
                                        <p>密碼</p>
                                        <div class="input-group">
                                            <input type="password" class="form-control" id="user-pwd" value=""
                                                   placeholder="請輸入密碼，留空則不修改密碼" aria-label="********"
                                                   aria-describedby="button-addon-group-password">
                                        </div>
                                    </div>
                                </li>
                                <li class="media" align="center">
                                    <div class="media-body">
                                        <div class="input-group">
                                            <div class="input-group-append" style="text-align:center;margin:0 auto;">
                                                <button class="btn btn-link" onclick="updateUserInfo()"
                                                        style="font-size:13px;padding: 6px 18px;font-weight: 600;color: #ffffff;background-color:#19a299;border-color:#19a299;border-radius:5px;"
                                                        type="button" id="button-addon-group-password">保存並更新
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Chat Profilebar -->
            <!-- Start Chat Settingbar -->
            <div class="tab-pane fade" id="pills-setting-justified" role="tabpanel"
                 aria-labelledby="pills-setting-tab-justified">
                <div class="chat-settingbar">
                    <div class="chat-left-headbar">
                        <div class="row align-items-center">
                            <div class="col-12">
                                <ul class="list-unstyled mb-0">
                                    <li class="media">
                                        <img class="align-self-center mr-2" src="/home/images/logo.svg"
                                             alt="Generic placeholder image">
                                        <div class="media-body">
                                            <h5 class="mb-0 mt-2">設定</h5>
                                        </div>
                                    </li>
                                </ul>
                            </div>

                        </div>
                    </div>
                    <div class="chat-left-body">
                        <p class="setting-header">通用設定</p>
                        <div class="general-setting">
                            <div class="row align-items-center pb-3">
                                <div class="col-9"><h6 class="mb-0">新消息聲音提醒</h6></div>
                                <div class="col-3 text-right">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input"
                                               id="new-msg-notification-sound" checked>
                                        <label class="custom-control-label" for="new-msg-notification-sound"></label>
                                    </div>
                                </div>
                            </div>

                            <div class="row align-items-center pb-3">
                                <div class="col-9"><h6 class="mb-0">新消息彈窗</h6></div>
                                <div class="col-3 text-right">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="new-msg-alert">
                                        <label class="custom-control-label" for="new-msg-alert"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="row align-items-center pb-3">
                                <div class="col-9"><h6 class="mb-0">提醒是否顯示消息內容</h6></div>
                                <div class="col-3 text-right">
                                    <div class="custom-control custom-checkbox">
                                        <label for="new-msg-is-show"></label><input type="checkbox"
                                                                                    class="custom-control-input"
                                                                                    id="new-msg-is-show"
                                                                                    checked>
                                        <label class="custom-control-label" for="new-msg-alert"></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p class="setting-header" style="padding-bottom:0;">新消息提示聲音</p>
                        <div class="design-setting custom-checkbox-button">
                            <div class="form-check-inline checkbox-primary">
                                <input class="new-msg-tips-audio" type="checkbox" id="new-msg-tip-audio-1"
                                       value="wx.mp3">
                                <label for="new-msg-tip-audio-1"></label>
                            </div>
                            <div class="form-check-inline checkbox-primary">
                                <input class="new-msg-tips-audio" type="checkbox" id="new-msg-tip-audio-2"
                                       value="ios.mp3">
                                <label for="new-msg-tip-audio-2"></label>
                            </div>
                            <div class="form-check-inline checkbox-primary">
                                <input class="new-msg-tips-audio" type="checkbox" id="new-msg-tip-audio-3"
                                       value="ios8.mp3">
                                <label for="new-msg-tip-audio-3"></label>
                            </div>
                            <div class="form-check-inline checkbox-primary">
                                <input class="new-msg-tips-audio" type="checkbox" id="new-msg-tip-audio-4"
                                       value="ios9.mp3" checked>
                                <label for="new-msg-tip-audio-4"></label>
                            </div>
                            <div class="form-check-inline checkbox-primary">
                                <input class="new-msg-tips-audio" type="checkbox" id="new-msg-tip-audio-5"
                                       value="qn.mp3">
                                <label for="new-msg-tip-audio-5"></label>
                            </div>
                            <div class="form-check-inline checkbox-primary">
                                <input class="new-msg-tips-audio" type="checkbox" id="new-msg-tip-audio-6"
                                       value="qq.mp3">
                                <label for="new-msg-tip-audio-6"></label>
                            </div>

                        </div>
                        <p class="setting-header"
                           style="padding-bottom:0;border-bottom:0;border-top:1px solid rgba(0, 0, 0, 0.03);">
                            <a href="/home/index/logout" class="btn btn-primary" style="width:100%;"
                               data-toggle="tooltip" data-placement="right" title="退出"><i
                                        class="feather icon-log-out"></i>註銷登錄</a>
                        </p>
                    </div>
                </div>
            </div>
            <!-- End Chat Settingbar -->
        </div>
        <div class="chat-menu">
            <ul class="nav nav-pills nav-justified mb-0" id="pills-tab-justified" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="pills-chat-tab-justified" data-toggle="pill"
                       href="#pills-chat-justified" role="tab" aria-controls="pills-chat-justified"
                       aria-selected="true"><i class="feather icon-message-circle"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="pills-addchat-tab-justified" data-toggle="pill"
                       href="#pills-addchat-justified" role="tab" aria-controls="pills-addchat-justified"
                       aria-selected="false"><i class="feather icon-users"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="pills-profile-tab-justified" data-toggle="pill"
                       href="#pills-profile-justified" role="tab" aria-controls="pills-profile-justified"
                       aria-selected="false"><i class="feather icon-user"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="pills-setting-tab-justified" data-toggle="pill"
                       href="#pills-setting-justified" role="tab" aria-controls="pills-setting-justified"
                       aria-selected="false"><i class="feather icon-settings"></i></a>
                </li>
            </ul>
        </div>
    </div>
    <!-- End Chat Leftbar -->
    <!-- Start Chat Rightbar -->
    <div class="chat-rightbar">
        <!-- Start Chat Detail -->
        <div class="chat-detail" id="chat-detail">
            <div class="chat-head">
                <div class="row align-items-center">
                    <div class="col-3">
                        <ul class="list-unstyled mb-0">
                            <li class="media">
                                <div class="user-status" id="cur-chat-user-status"></div>
                                <img class="align-self-center rounded-circle" id="cur-chat-user-img"
                                     src="/home/images/girl.svg" alt="Generic placeholder image">
                                <div class="media-body">
                                    <h5 id="cur-chat-user-name">空白頁</h5>
                                    <p class="mb-0" id="cur-chat-user-status-text">Online</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="col-6">
                        <p class="h5 text-primary text-center"> 最新活動 :</p>
                        <p class="h6 text-danger text-center">見面僅需5000新臺幣App Store禮品卡!!</p>
                    </div>
                    <div class="col-3">
                        <ul class="list-inline float-right mb-0">
                            <li class="list-inline-item">
                                <div class="dropdown">
                                    <a href="#" class="" id="chatDropdown" data-toggle="dropdown" aria-haspopup="true"
                                       aria-expanded="false"><i class="feather icon-more-vertical-"></i></a>
                                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="chatDropdown">
                                        <a class="dropdown-item font-14" href="#" id="view-user-info">查看好友資訊</a>
                                    </div>
                                </div>
                            </li>
                            <li class="list-inline-item">
                                <a href="#" class="back-arrow"><i class="feather icon-x"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="chat-body" style="">
                <div class="tab-content" id="chat-listContent" style="padding-bottom: 25px">
                    <div class="tab-pane fade show active" id="chat-first" role="tabpanel"
                         aria-labelledby="chat-first-tab">
                        <div class="chat-day text-center mb-3">
                            <span class="badge badge-secondary-inverse">Today</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="chat-bottom">
                <div class="chat-messagebar">
                    <form onkeydown="if(event.keyCode===13)return false;">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <a href="javascript:void(0)"><i class="feather icon-type" id="button-addonmic"></i></a>
                            </div>
                            <input type="hidden" id="will-send-msg-friend-id">
                            <input type="hidden" id="will-send-msg-group-id">
                            <div contenteditable="true" class="form-control will-send-msg-content"
                                 id="will-send-msg-content" placeholder="請輸入消息..." aria-label="Text">
                            </div>
                            <div class="input-group-append">
                                <input type="file" id="select-send-file" multiple="multiple" size="20"
                                       style="display:none;" onchange="startSendFile()">
                                <a href="#" class="mr-3" id="button-addonlink"><i
                                            class="feather icon-paperclip"></i></a>
                                <a href="javascript:void(0)" id="button-addonsend"><i class="feather icon-send"></i></a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- End Chat Detail -->
        <!-- Start Chat User Info -->
        <div class="chat-user-info" id="view-chat-user-info">
            <input type="hidden" id="focus-view-friend-id">
            <input type="hidden" id="focus-view-friend-account-id">
            <div class="chat-user-head">
                <div class="row align-items-center">
                    <div class="col-9">
                        <h5>查看好友</h5>
                    </div>
                    <div class="col-3">
                        <ul class="list-inline float-right mb-0">
                            <li class="list-inline-item">
                                <a href="#" id="close-user-info"><i class="feather icon-x"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="chat-user-body">
                <div class="userbar">
                    <img class="user-pic img-fluid" src="/home/images/default.png" id="view-user-info-pic" alt="">
                    <h5 id="view-user-info-remark">Private Chat</h5>
                    <p class="mb-0" id="view-user-info-desc"></p>
                </div>
                <div class="user-detail">
                    <p class="user-detail-header">基本信息</p>
                    <div class="user-about">
                        <h6 id="view-user-info-remark-edit"><i class="feather icon-info mr-2"></i></h6>
                        <h6 id="view-user-info-username"><i class="feather icon-user mr-2"></i></h6>
                        <h6 class="my-3" id="view-user-info-email"><i class="feather icon-mail mr-2"></i>
                        </h6>
                        <h6 class="mb-0" id="view-user-info-tel"><i class="feather icon-phone-call mr-2"></i></h6>
                    </div>
                    <p class="user-detail-header">聊天設定</p>
                    <div class="user-setting">
                        <div class="row align-items-center pb-3">
                            <div class="col-9"><h6 class="mb-0">消息免打擾</h6></div>
                            <div class="col-3 text-right">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input"
                                           id="mute-notification-setting">
                                    <label class="custom-control-label" for="mute-notification-setting"></label>
                                </div>
                            </div>
                        </div>
                        <div class="row align-items-center pb-3">
                            <div class="col-9"><h6 class="mb-0">加入黑名單</h6></div>
                            <div class="col-3 text-right">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="block-friend-setting">
                                    <label class="custom-control-label" for="block-friend-setting"></label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="user-detail-header">高級設定</p>
                    <div class="user-setting">
                        <div class="row align-items-center pb-3" style="text-align:center;">
                            <div class="col-12"><input type="button" class="btn btn-warning" id="clear-friend-msg"
                                                       value="清空聊天記錄" style="width:100%;"></div>
                        </div>
                        <div class="row align-items-center pb-3" style="text-align:center;">
                            <div class="col-12"><input type="button" class="btn btn-danger" id="delete-friend-btn"
                                                       value="解除好友關係" style="width:100%;"></div>
                        </div>
                        <div class="row align-items-center pb-3" style="text-align:center;">
                            <div class="col-12"><input type="button" id="start-chat-btn" class="btn btn-primary"
                                                       value="立即發送消息" style="width:100%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Chat User Info -->
        <!-- Start Chat group Info -->
        <div class="chat-user-info" id="view-chat-group-info">

        </div>
        <!-- End Chat group Info -->
    </div>
    <!-- End Chat Rightbar -->
</div>
<!-- End Chat Layout -->
<!-- Start js -->
<script src="/home/js/jquery.min.v1.12.4.js"></script>
<script src="/home/js/jquery.cookie.js"></script>
<script src="/home/js/jquery.jsoncookie.js"></script>
<script src="/home/js/popper.min.js"></script>
<script src="/home/js/bootstrap.min.js"></script>
<script src="/home/js/modernizr.min.js"></script>
<script src="/home/js/detect.js"></script>
<script src="/home/js/jquery.slimscroll.js"></script>
<script src="/home/js/vertical-menu.js"></script>
<!-- Slick js -->
<script src="/home/plugins/slick/slick.min.js"></script>
<!--[if gt IE 8]><!-->
<script src="/home/js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script> <!--<![endif]-->
<script src="/home/js/jquery.mousewheel-3.0.6.min.js"></script>
<script src="/home/js/jquery.mCustomScrollbar.min.js"></script>
<script src="/home/js/jquery.emoji.min.js"></script>
<!-- Core js -->
<script src="/home/js/core.js"></script>
<script src="/home/js/common.js"></script>
<script src="/home/layer/layer.js"></script>
<script src="/home/js/chat.js"></script>
<script src="/home/js/websocket.js"></script>
<!-- End js -->

<script type="text/javascript">
    let websocket;
    setTimeout(function () {
        websocket = buildWebSocket(${pc_account.id});
    }, 500);
    $(document).ready(function () {
        $("#user-birthday").attr('max', dateFormat('YYYY-mm-dd', new Date()));
        $("#searchFriends").click(function () {
            $.get('search_all_user_list', function (data, status, xhr) {
                if (data === '') {
                    layer.msg('連個毛都沒有蒐索到呢！');
                }
                $("#show-search-user-list").html(data);
            });
        })

        $("#will-send-msg-content").emoji({
            button: "#button-addonmic",
            showTab: true,
            animation: 'slide',
            position: 'topRight',
            icons: [
                {
                    name: "貼圖",
                    path: "/home/css/sina/",
                    maxNum: 83,
                    file: ".png"
                }
            ]
        });
        $("#button-addonmic").click(function () {
            const emoji = $("#emoji_container_1");
            emoji.css({'top': '', 'left': '0px', 'bottom': '10%', 'max-width': '100%'});
            $("#chat-detail").append(emoji);
        });

        //用户状态改变
        $(".status-change").click(function () {
            $("#online-status").attr('data-key', $(this).attr('data-key'));
            $("#online-status").html($(this).html());
        });
        //用户性别改变
        $(".sex-change").click(function () {
            $("#user-sex").attr('data-key', $(this).attr('data-key'));
            $("#user-sex").html($(this).html());
        });
        //点击搜索好友按钮
        $("#add-users-search-btn").click(function () {
            const username = $("#add-users-search-content").val();
            if (username === '') {
                layer.msg('請輸入蒐索用戶名！');
                return;
            }
            $.get('search_user_list', {username: username}, function (data, status, xhr) {
                if (data === '') {
                    layer.msg('連個毛都沒有蒐索到呢！');
                }
                $("#show-search-user-list").html(data);
            });
        });
        //点击发送好友请求按钮
        $("#add-users-submit-btn").click(function () {
            const checkedUsers = $("input.add-user-request[type='checkbox']:checked");
            if (checkedUsers.length < 1) {
                layer.msg('請選擇添加的用戶');
                return;
            }
            let aids = [];
            checkedUsers.each(function (i, e) {
                aids[i] = $(e).val();
            });
            layer.prompt({title: '驗證備註資訊', formType: 2}, function (text, index) {
                layer.close(index);
                aids = aids.toString()
                ajaxRequest('add_friend_request', 'post', {accountIds: aids, remark: text}, function (data) {
                    //发送广播消息来更新对方的好友列表
                    sendMsg(websocket, {
                        msg: aids,
                        toId: 0,
                        fromId: ${pc_account.id},
                        chatType: 'event',
                        msgType: 'refresh_friend_list'
                    });
                    layer.msg('好友添加成功');
                    $("#addUser").modal("toggle");
                }, function (data) {
                    layer.msg(data.msg);
                });
            });
        });
        //获取好友列表
        getFriendList();

        //消息免打扰按钮,拉黑
        $("#mute-notification-setting,#block-friend-setting").change(function () {
            updateFriend(false);
        })
        //加载聊天会话
        initChatTabList();
        //点击单人开启聊天按钮
        $("#start-chat-btn").click(function () {
            const friendId = $("#focus-view-friend-id").val();
            const friendAccountId = $("#focus-view-friend-account-id").val();
            const username = $("#focus-view-friend-id").attr('username');
            const status = $("#focus-view-friend-id").attr('status');
            const picture = $("#focus-view-friend-id").attr('picture');
            const friendChat = $("#chat-" + friendId + "-tab");
            if (friendChat.length === 0) {
                const option = {};
                option.friendId = friendId;
                option.friendAccountId = friendAccountId;
                option.username = username;
                option.accountStatus = status;
                option.picture = picture;
                option.lastMsg = '';
                option.time = dateFormat("HH:MM", new Date());
                option.type = 'single';
                createChatTab(option, true);
            }
            $("#pills-chat-tab-justified").trigger('click');
            $("#close-user-info").trigger('click');
            $('#chat-' + friendId + '-tab').trigger('click');
        });
        //点击发送消息按钮
        $("#button-addonsend").on('click', function () {
            //var msg = $("#will-send-msg-content").val();
            const msg = $("#will-send-msg-content").html();
            if (msg.trim() === '') {
                layer.msg('好歹輸入點啥再發送呢騷年！');
                return;
            }
            if ($(this).attr('msg-type') === 'single') {
                const friendId = $("#will-send-msg-friend-id").val();
                const friendAccountId = $("#focus-view-friend-account-id").val();
                sendMsg(websocket, {
                    msg: msg,
                    toId: friendAccountId,
                    fromId: ${pc_account.id},
                    chatType: 'single',
                    msgType: 'text'
                });
                sendTextMsg(msg, friendId, 'single');
                showLastMsgTips(msg, friendId, 'single');
            }
            $("#will-send-msg-content").html('');
        });
        //输入数据后回车事件
        $("#will-send-msg-content").keydown(function (e) {
            if (e.keyCode === 13) {
                $("#button-addonsend").trigger('click');
            }
        });
        //搜索好友输入数据后回车事件
        $("#add-users-search-content").keydown(function (e) {
            if (e.keyCode === 13) {
                $("#add-users-search-btn").trigger('click');
                return false;
            }
        });
        //点击发送附件按钮
        $("#button-addonlink").click(function () {
            $("#select-send-file").click();
        });
        //点击选择消息提示音
        $(".new-msg-tips-audio").click(function () {
            $(".new-msg-tips-audio").prop('checked', false);
            $(this).prop('checked', true);
            playAudio('/home/audio/' + $(this).val());
        });
        //点击删除好友按钮
        $("#delete-friend-btn").click(function () {
            const friendId = $("#focus-view-friend-id").val();
            if (friendId == null) {
                layer.msg('請選擇好友！');
                return;
            }
            //询问框
            layer.confirm('確定删除？ （删除後不能收到該好友的資訊哦！）', {
                btn: ['確定', '再想想'] //按钮
            }, function () {
                const postData = {friendId: friendId};
                ajaxRequest('delete_friend', 'post', postData, function (data) {
                    layer.msg('刪除成功！');
                    $("#chat-" + friendId + "-tab").remove();
                    getFriendList();
                    const allChatTapInfo = getALLChatTapInfoFromLocal();
                    delete allChatTapInfo[friendId];
                    setAllChatTapInfoToLocal(allChatTapInfo);
                    websocket = buildWebSocket(${pc_account.id});
                }, function (data) {
                    layer.msg(data.msg);
                });
            }, function () {

            });
        });
        //点击清空消息按钮
        $("#clear-friend-msg").click(function () {
            //询问框
            layer.confirm('確定清空？ （清空後不能恢復哦！）', {
                btn: ['確定', '再想想'] //按钮
            }, function () {
                clearMsg($("#focus-view-friend-id").val(), 'single');
            }, function () {

            });
        });
    });

    //上传图片
    function uploadFile() {
        if ($("#user-photo-file").val() === '') return;
        uploadFileToServer('user-photo-file', function (data) {
            layer.msg('圖片上傳成功');
            $("#user-head-pic").val(data.data);
            updateUserInfo();
        }, function (data) {
            if (!isJson(data)) {
                data = $.parseJSON(data);
            }
            layer.msg(data.msg);
        });
    }

    function updateUserInfo() {
        const postData = {};
        postData.headPic = $("#user-head-pic").val();
        postData.username = $("#user-name").val();
        postData.info = $("#user-info").val();
        postData.chatStatus = $("#online-status").attr('data-key');
        postData.sex = $("#user-sex").attr('data-key');
        postData.birthday = $("#user-birthday").val();
        postData.email = $("#user-email").val();
        postData.mobile = $("#user-mobile").val();
        postData.password = $("#user-pwd").val();
        ajaxRequest('update_user_info', 'post', postData, function (data) {
            layer.msg('用戶信息更新成功');
            $("#show-user-name").text(postData.username);
            $("#show-user-info").text(postData.info);
        }, function (data) {
            layer.msg(data.msg);
        });
    }

    function getFriendList() {
        $.get('friend_list', {}, function (data, status, xhr) {
            if (data === '') {
                layer.msg('你真可憐，沒有一個好友！');
            }
            $("#new-friend-request-tab").nextAll("a.nav-link").remove();
            $("#new-friend-request-tab").after(data);
        });
    }

    //点击单人聊天会话事件
    function clickChatTab(friendId) {
        const chatTabInfo = gloabalChatInfo[friendId];
        $("#cur-chat-user-status").removeClass('active').removeClass('status-offline').removeClass('status-away').addClass(chatTabInfo.accountStatus);
        $("#cur-chat-user-img").attr('src', chatTabInfo.picture);
        $("#cur-chat-user-name").text(chatTabInfo.username);
        if (chatTabInfo.accountStatus === 'active') {
            $("#cur-chat-user-status-text").text('在綫');
        } else if (chatTabInfo.accountStatus === 'status-offline') {
            $("#cur-chat-user-status-text").text('離綫');
        } else {
            $("#cur-chat-user-status-text").text('離開');
        }
        $("#will-send-msg-friend-id").val(friendId);
        $("#focus-view-friend-account-id").val(chatTabInfo.friendAccountId);
        //从本地加载聊天信息
        loadMsgFromLocal(friendId);
        $(".chat-rightbar").addClass('show');
        $(".chat-user-info").removeClass("show");
        $(".chat-bottom").removeClass("small");
        $("#view-user-info").show();
        $("#view-group-info").hide();
        $("#button-addonsend").attr('msg-type', 'single');
        $(".chat-body")[0].scrollTop = $(".chat-body")[0].scrollHeight
        $("#chat-" + friendId + "-tab").find('span.unread-num').remove();
    }

    //选中文件后开始发送
    function startSendFile() {
        if ($("#select-send-file").val() === '') return;
        const f = document.getElementById("select-send-file").files;
        const formData = new FormData();
        const friendId = $("#will-send-msg-friend-id").val();
        let friendAccountId = $("#focus-view-friend-account-id").val();
        const msgType = $("#button-addonsend").attr('msg-type');
        let sendId;
        if (msgType === 'single') {
            sendId = friendId;
        }
        const loading = layer.load(2, {shade: false}); //0代表加载的风格，支持0-2
        for (let i = 0; i < f.length; i++) {
            const filename = f[i].name;
            const filesize = f[i].size;
            let suffix = filename.substring(filename.lastIndexOf(".") + 1, filename.length);
            suffix = suffix.toLowerCase();
            //图片文件
            if (suffix === 'png' || suffix === 'jpg' || suffix === 'jpeg' || suffix === 'gif') {
                formData.set('photo', f[i]);
                uploadMuiltFileToServer('/upload/upload_photo', formData, function (data) {
                    sendMsg(websocket, {
                        msg: '[圖片]' + filename,
                        toId: friendAccountId,
                        fromId: ${pc_account.id},
                        chatType: msgType,
                        msgType: 'img',
                        attachUrl: data.data
                    });
                    sendImgMsg(filename, data.data, sendId, msgType);
                    showLastMsgTips('[圖片]' + filename, sendId, msgType);
                }, function (data) {
                    if (!isJson(data)) {
                        data = $.parseJSON(data);
                    }
                    layer.msg(data.msg);
                });
                continue;
            }
            //其他文件
            formData.set('file', f[i]);
            uploadMuiltFileToServer('/upload/upload_file', formData, function (data) {
                showLastMsgTips('[文件]' + filename, sendId, msgType);
                //此处判断文件类型
                if (suffix === 'mp3') {
                    sendAudioMsg(filename, data.data, sendId, msgType);
                    sendMsg(websocket, {
                        msg: filename,
                        toId: friendAccountId,
                        fromId: ${pc_account.id},
                        chatType: msgType,
                        msgType: 'audio',
                        attachUrl: data.data
                    });
                    return;
                }
                if (suffix === 'mp4' || suffix === 'rmvb' || suffix === '3gp' || suffix === 'avi' || suffix === 'flv' || suffix === 'mkv') {
                    sendVideoMsg(filename, data.data, sendId, msgType);
                    sendMsg(websocket, {
                        msg: filename,
                        toId: friendAccountId,
                        fromId: ${pc_account.id},
                        chatType: msgType,
                        msgType: 'video',
                        attachUrl: data.data
                    });
                    return;
                }
                sendFileMsg(filename, data.data, filesize, getPicBySuffix(suffix), sendId, msgType);
                sendMsg(websocket, {
                    msg: filename,
                    toId: friendAccountId,
                    fromId: ${pc_account.id},
                    chatType: msgType,
                    msgType: 'file',
                    attachUrl: data.data,
                    attachSize: filesize
                });
            }, function (data) {
                if (!isJson(data)) {
                    data = $.parseJSON(data);
                }
                layer.msg(data.msg);
            });

        }
        layer.close(loading);
        $("#select-send-file").val('');
    }
</script>
</body>
</html>